<!--
 * @Author: your name
 * @Date: 2019-10-22 09:06:18
 * @LastEditTime: 2020-08-05 11:26:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /e:\yjp\my_test\vue_plugins\src\views\Websocket.vue
 -->
<template>
<div class="tab_wrap">
    <BScroll
      :data="list"
      :probeType="2"
      :scrollY="true"
      :startY="start"
      @scroll="A_Scroll"
      ref="scroll_wrap"
      class="scroll_wrap"
    >
      <ul class="tab_item">
        <li v-for="(item,index) in list" :key="index">
            {{item}}
            <br/>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti aspernatur animi voluptates quisquam ea, ipsam ullam sapiente, cumque facilis fuga repudiandae doloribus impedit officia culpa voluptatum porro quam consectetur non!
            <br/>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti aspernatur animi voluptates quisquam ea, ipsam ullam sapiente, cumque facilis fuga repudiandae doloribus impedit officia culpa voluptatum porro quam consectetur non!
            <br/>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti aspernatur animi voluptates quisquam ea, ipsam ullam sapiente, cumque facilis fuga repudiandae doloribus impedit officia culpa voluptatum porro quam consectetur non!
            <br/>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti aspernatur animi voluptates quisquam ea, ipsam ullam sapiente, cumque facilis fuga repudiandae doloribus impedit officia culpa voluptatum porro quam consectetur non!
        </li>
      </ul>
    </BScroll>
</div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            default:null
        },
        startY:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
            start:0
        }
    },
    methods:{
        A_Scroll(e){
            console.log("e",e);
        }
    },
    watch:{
        startY(newval,oldval){
            console.log("startY",newval);
            this.$refs.scroll_wrap.scroll.scrollTo(newval,0,300,'ease');
            this.start = newval;
        }
    }
}
</script>
<style lang="less" scoped>

.tab_wrap{
    width: 96%;
    margin: 0 auto;
    height: 100%;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
    border-radius: 4px;
    .tab_item{
        width: 90%;
        // height: 500px;
        margin: 0 auto;
        // overflow: hidden;
    }
}
</style>